<template>
    <PubHeader :title="title" />
    <div v-show="vid" id="player" class="player"></div>
    <!-- 没视频时，显示默认图片 -->
    <div class="default" v-show="!vid" @click="noVideoHandler">
        <!-- <span class="iconfont icon-zanwushipin"></span>
        <span class="text">暂无视频</span> -->
        <img :src="videoInfo.question" alt="">
    </div>
    <div class="details">
        <div class="details-title">
            <h3>{{ videoInfo.t_title }}</h3>
            <p>{{ videoInfo.title }}</p>
        </div>
        <div class="details-fun" v-if="!changeCurrentBtn">
            <div class="btn btn-jx" @click="imageHandler"><span class="iconfont icon-tupian"></span>图片解析</div>
            <div class="btn btn-sc" @click="addCollectHandler(videoInfo.id)"><span
                    class="iconfont icon-favor"></span>加入收藏</div>
        </div>
        <div class="details-fun" v-else>
            <div class="btn btn-jx" @click="imageQuestionHandler"><span class="iconfont icon-timu"></span>查看题目</div>
            <div class="btn btn-dn" @click="imageAnswerHandler"><span class="iconfont icon-daan"></span>查看答案</div>
            <div class="btn btn-sc" @click="addWrongHandler"><span class="iconfont icon-favor"></span>加入错题本</div>
        </div>
    </div>
    <div class="tab">
        <van-tabs v-model:active="active" @click-tab="onClickTab">
            <van-tab title="知识点">
                <Knowledge :nextID="nextID" :courseID="courseID" :id="chapterID" @onIDEvent="getIDHandler" />
            </van-tab>
            <!-- 临时砍掉 -->
            <!-- <van-tab title="解题技巧">
                <Skills :id="chapterID" @onIDEvent="getIDHandler" />
            </van-tab> -->
            <van-tab title="历年考题">
                <Yearsexams :courseID="courseID" :id="chapterID" @onIDEvent="getIDYearHandler" />
            </van-tab>
        </van-tabs>
    </div>
    <!-- 遮罩层-图片解析 -->
    <!-- <van-overlay :show="show">
        <div class="wrapper" @click="closeHandler">
            <div class="block">
                <h3>导数的两个前置问题-瞬时速度和切线</h3>
                <img :src="videoInfo.question" alt="">
            </div>
        </div>
    </van-overlay> -->
    <!-- 登录视图 -->
    <div class="tankaung_cover_box hide" data-action='login' v-if="loginHide">
        <div class="tankaung_cover login_cover_box">
            <p>请先登录</p>
            <div class="tankaung_cover_btn">
                <div @click="loginHandler" class="cover_btn2" data-action='login'>确定</div>
            </div>
        </div>
    </div>
</template>

<script>

import PubHeader from "../components/PubHeader/index.vue"
import Knowledge from "./subTab/knowledge.vue"
import Skills from "./subTab/skills.vue"
import Yearsexams from "./subTab/yearsexams.vue"
import md5 from "js-md5"
import api from "../api"
import { showToast, showImagePreview } from 'vant';
import 'vant/lib/index.css';


export default {
    data() {
        return {
            vodPlayerJs: 'https://player.polyv.net/resp/vod-player/latest/player.js',
            vid: "",
            title: "高等数学上",
            active: 0,
            show: false,
            changeCurrentBtn: false,
            verify: "",
            chapterID: 1,    // 章节ID
            courseID: 1,    // 课程ID
            userid: "",
            videoInfo: {},
            loginHide: false,
            nextID: ""
        };
    },

    components: {
        PubHeader,
        Knowledge,
        Skills,
        Yearsexams
    },

    mounted() {
        // 获取用户信息
        this.userid = sessionStorage.getItem("user")
        //  设置章节ID
        this.chapterID = this.$route.params.id
        this.courseID = this.$route.params.courseID
        this.loadPlayerScript(this.loadPlayer);
        /**
         * 错题本进入默认显示
         */
        if (this.$route.params.type == 'wrong') {
            this.changeCurrentBtn = true
            this.active = 1
            this.http(this.courseID, this.chapterID)
        }
        if (this.$route.params.type == 'collect') {
            this.http(this.courseID, this.chapterID)
        }
        if (this.$route.params.type == 'math') {
            this.http("", this.chapterID)
        }
    },
    methods: {
        http(courseID, chapterID) {
            if (this.userid && this.userid != 'undefined') {
                // 获取视频数据
                api.getVideoPlay({
                    id: chapterID,
                    userid: this.userid,
                    course: courseID,
                    // 获取加密串
                    verify: md5(courseID + this.chapterID + this.userid)
                }).then(res => {
                    if (res.data.data.status == 1) {
                        // 获取视频相关信息
                        this.videoInfo = res.data.data
                        this.vid = res.data.data.vid
                        this.title = res.data.data.n_title
                        // 播放视频
                        this.loadPlayerScript(this.loadPlayer);
                        // 监听播放完毕
                        this.player.on("s2j_onPlayOver", () => {
                            if (res.data.data.next_id !== res.data.data.id) {
                                // 播放下一个视频
                                this.http(res.data.data.next_id)
                                // 切换下一个高亮
                                this.nextID = res.data.data.next_id
                            } else {
                                showToast({
                                    message: '本章节最后一个视频'
                                });
                            }
                        })
                    } else {
                        showToast({
                            message: '此账号无权限'
                        });
                    }
                })
            } else {
                this.loginHide = true
            }
        },
        loadPlayerScript(callback) {
            if (!window.polyvPlayer) {
                const myScript = document.createElement('script');
                myScript.setAttribute('src', this.vodPlayerJs);
                myScript.onload = callback;
                document.body.appendChild(myScript);
            } else {
                callback();
            }
        },

        loadPlayer() {
            const polyvPlayer = window.polyvPlayer;
            this.player = polyvPlayer({
                playsafe: this.videoInfo.token,
                ts: this.videoInfo.ts,
                sign: this.videoInfo.hash,
                wrap: '#player',
                width: "100%",
                height: 250,
                vid: this.vid,
                forceH5: true,
                speed: [2, 1.5, 1.25, 1, 0.75],
                autoplay: false,
                fullscreenProxy: true,
                ban_history_time: 'on',
                vrmVersion: 13,
                viewerInfo: {
                    viewerId: this.userid, // 观众ID
                    viewerName: '亲~', // 观众昵称
                }
            });
        },
        /**
         * 切换tab
         */
        onClickTab(par) {
            // if (par.name == 1) {
            //     this.changeCurrentBtn = true
            // } else {
            //     this.changeCurrentBtn = false
            // }
        },
        imageHandler() {
            showImagePreview([this.videoInfo.question])
        },
        /**
         * 查看问题
         */
        imageQuestionHandler() {
            showImagePreview([this.videoInfo.question])
        },
        /**
         * 查看答案
         */
        imageAnswerHandler() {
            showImagePreview([this.videoInfo.answer])
        },
        closeHandler() {
            this.show = false
        },
        /**
         * 加入收藏
         */
        addCollectHandler(id) {
            api.addCollectOrWrong({
                id: id,
                type: 1,
                userid: this.userid,
                verify: md5(id + "1" + this.userid)
            }).then(res => {
                if (res.data.code === 200) {
                    if (res.data.status === 1) {
                        showToast({
                            message: '收藏成功'
                        });
                    }
                    if (res.data.status === 0) {
                        showToast({
                            message: '取消收藏'
                        });
                    }
                } else {
                    showToast({
                        message: '收藏失败'
                    });
                }
            })
        },
        /**
         * 加入错题
         */
        addWrongHandler() {
            api.addCollectOrWrong({
                id: this.courseID,
                type: 2,
                userid: this.userid,
                verify: md5(this.courseID + "2" + this.userid)
            }).then(res => {
                if (res.data.code === 200) {
                    if (res.data.status === 1) {
                        showToast({
                            message: '加入错题成功'
                        });
                    }
                    if (res.data.status === 0) {
                        showToast({
                            message: '取消加入错题'
                        });
                    }
                } else {
                    showToast({
                        message: '加入错题失败'
                    });
                }
            })
        },
        /**
         * 获取课程ID
         */
        getIDHandler(id, flag) {
            this.changeCurrentBtn = flag
            // 初始化player
            if (this.player) {
                this.player.destroy();
            }
            this.http(id, this.chapterID)
        },
        // getIDHandler(id, flag) {
        //     console.log(id,this.courseID);
        //     this.changeCurrentBtn = flag
        //     // 初始化player
        //     if (this.player) {
        //         this.player.destroy();
        //     }
        //     // 我的收藏过来，携带了courseID
        //     if(this.courseID){
        //         this.http(this.courseID)
        //     }else{
        //         this.http(id)
        //     }
        // },
        /**
         * 历年考题
         */
        getIDYearHandler(id, flag) {
            this.changeCurrentBtn = flag
            // 初始化player
            if (this.player) {
                this.player.destroy();
            }
            this.http(id, this.chapterID)
        },
        /**
         * 唤醒登录按钮
         */
        loginHandler() {
            wx.miniProgram.redirectTo({
                url: '/pages/login/login'
            });
        },
        /**
         * 无视频，点击放大图片
         */
        noVideoHandler() {
            showImagePreview([this.videoInfo.question])
        }
    },
    beforeUnmount() {
        if (this.player) {
            this.player.destroy();
        }
    },
    destroyed() {
        if (this.player) {
            this.player.destroy();
        }
    }
}

</script>

<style>
.player {
    width: 100%;
    height: 250px;
    position: sticky;
    top: 55px;
    z-index: 100;
    background: #000;
}

.default {
    width: 100%;
    height: 250px;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    /* position: sticky;
    top: 55px;
    z-index: 100; */
}

.default .iconfont {
    display: block;
    font-size: 50px;
    color: #fff;
}

.default .text {
    display: block;
    color: #fff;
}

.default img {
    width: 100%;
}

.details {
    padding: 15px;
}

.details-title h3 {
    font-size: 18px;
    color: #333;
}

.details-title p {
    font-size: 15px;
    color: #333;
    margin-top: 5px;
    font-weight: 700;
}

.details-fun {
    overflow: hidden;
    clear: both;
}

.details-fun .btn {
    float: left;
    width: 90px;
    height: 30px;
    line-height: 30px;
    border-radius: 3px;
    color: #fff;
    padding: 5px;
    margin-right: 10px;
    margin-top: 10px;
}

.details-fun .btn span {
    margin-right: 5px;
}

.details-fun .btn.btn-jx {
    background-color: #594094;
}

.details-fun .btn.btn-sc {
    background-color: #1E9FFF;
}

.details-fun .btn.btn-dn {
    background-color: #16BAAA;
}

/* 重置 vant tab样式 */
.van-tabs__wrap {
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
}

.van-tab--active {
    color: #594094;
}

.van-tabs__line {
    background: #594094;
}

/* 遮罩层-图片解析 */
.van-overlay {
    z-index: 999;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.block {
    background-color: #fff;
    margin: 0 20px;
    border-radius: 5px;
}

.block h3 {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.block img {
    width: 100%;
}

/* 登录样式 */
.tankaung_cover_box {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.1);
}

.tankaung_cover {
    width: 4rem;
    height: 2rem;
    background: #fff;
    border-radius: 0.1rem;
    box-shadow: 0 0 15px #ddd;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -1rem 0 0 -2rem;
    z-index: 99999;
}

.tankaung_cover p {
    font-size: 0.3rem;
    text-align: center;
    height: 1.2rem;
    line-height: 1.2rem;
    border-bottom: 1px solid #ddd;
}

.tankaung_cover_btn div {
    font-size: 0.3rem;
    text-align: center;
    line-height: 0.8rem;
    cursor: pointer;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 9999999;
}

.cover_btn1 {
    width: 1.99rem;
    border-right: 0.01rem solid #ddd;
}

.cover_btn2 {
    width: 1.99rem;
}
</style>